<template>
  <div class="viewport bg-gray view-reset-verify">
    <div class="box">
      <h2>验证身份</h2>
      <input type="number" v-model="mobile" placeholder="请输入手机号"/>
      <input type="text" v-model="verifyCode" placeholder="请输入验证码"/>
      <r-btn-countdown class="btn-countdown" @click="sendVerifyCode" v-model="count"/>
      <r-btn primary block :disabled="signDisabled" @click="next">下一步</r-btn>
    </div>

  </div>
</template>
<script>
import RLogo from 'src/components/r-logo'
import RBtn from 'src/components/r-btn'
import RBtnCountdown from 'src/components/r-btn-countdown'

export default {
  name: 'view-reset-verify',
  components: {
    RLogo,
    RBtn,
    RBtnCountdown
  },
  data () {
    return {
      mobile: '',
      verifyCode: '',
      count: false,
      signDisabled: false
    }
  },
  methods: {
    next () {
      this.$router.push({
        path: '/reset/recover'
      })
    },
    sendVerifyCode () {
      this.count = true
    }
  }
}
</script>
<style lang="scss">
  @import "../../styles/index";

  .view-reset-verify {
    h2 {
      font-weight: normal;
      text-align: center;
      margin: 20px 0;
    }

    .box {
      width: 300px;
      margin: 5px auto;
      border-radius: 2px;
    }

    input {
      line-height: 24px;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 3px;
      box-sizing: border-box;
      width: 100%;
      margin: 6px 0;
    }

    .btn-countdown {
      float: right;
      height: 40px;
      margin-top: -47px;
      @extend %left-before-thin;

      &::before {
        height: 60%;
        top: 20%;
        background-color: $color-line-weight;
      }
    }
  }
</style>
